<template>
	<div>

		<div class="row">
			<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12">
				<div class="panel">
					<div class="panel-body text-center" style="height:230px">
						<h5 class="bk-fg-warning">当月订单金额</h5>
						<div style="width:300px;left:50%;position:absolute;margin-left:-150px;">
							<div id="container-month" style="width: 300px; height: 170px; float: left"></div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12">
				<div class="panel">
					<div class="panel-body text-center" style="height:230px">
						<h5 class="bk-fg-success">其他销售金额</h5>
						<div style="width:300px;left:50%;position:absolute;margin-left:-150px;">
							<div id="container-other" style="width: 300px; height: 170px; float: left"></div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12">
				<div class="panel">
					<div class="panel-body text-center" style="height:230px">
						<h5 class="bk-fg-danger">累计销售金额</h5>
						<div style="width:300px;left:50%;position:absolute;margin-left:-150px;">
							<div id="container-cumulative" style="width: 300px; height: 170px; float: left"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-lg-12">
				<div class="panel">
					<div class="panel-heading bk-bg-primary">
						<h6><i class="fa fa-table red"></i><span class="break"></span>账单信息</h6>
					</div>

					<div class="panel-body">

						<div style="float: right; margin-bottom: 10px; width: 430px">
							<div class="input-group" style="float: left;width:300px">

								<div class="form-group col-sm-6" style="padding-left:0">
									<select class="form-control" id="ccmonth-w2" v-model="years">
										<option value="">所有年份</option>
										<option value="2015">2015</option>
										<option value="2016">2016</option>
										<option value="2017">2017</option>
										<option value="2018">2018</option>
									</select>
								</div>
								<div class="form-group col-sm-6" style="padding-left:0">
									<select class="form-control" id="ccmonth-w3" v-model="months">
										<option value="">所有月份</option>
										<option value="01">01</option>
										<option value="02">02</option>
										<option value="03">03</option>
										<option value="04">04</option>
										<option value="05">05</option>
										<option value="06">06</option>
										<option value="07">07</option>
										<option value="08">08</option>
										<option value="09">09</option>
										<option value="10">10</option>
										<option value="11">11</option>
										<option value="12">12</option>
									</select>
								</div>

							</div>
							<button type="button" class="btn btn-success" @click="billSearch">搜索</button>
							<form name="myform" action="../overlayPacket/export" method="post" enctype="multipart/form-data" style="display: inline">
								<button type="submit" class="btn btn-info">导出</button>
							</form>
						</div>
						<div class="clearfix"></div>

						<div class="table-responsive">
							<table class="table table-striped table-bordered bootstrap-datatable datatable">
								<thead>
								<tr>
									<th>日期</th>
									<th>订单号</th>
	                <th>客户名称</th>
									<th>套餐</th>
									<th>数量</th>
									<th>订单成本</th>
									<th>订单金额</th>
									<th>销售利润</th>
								</tr>
								</thead>
								<tbody>

								<tr v-for="(items, index) in billList.result">
									<td>{{ items.timeForShow }}</td>
									<td>AT2016111100{{ items.orderId }}</td>
									<td>{{ items.customerName }}</td>
									<td>{{ items.soldPackage }}</td>
									<td>{{ items.buyNum }}</td>
									<td>{{ items.totalStock }}</td>
									<td>{{ items.totalUnit }}</td>
									<td>{{ items.totalProfit }}</td>
								</tr>
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>

			<lsc-page
							mode="event"
							:totalPage="pages"
							:init-page="eventPage"
							:eventFunt="eventFunt"
							:eventParams="eventParams"
							@go-page="goPage"></lsc-page>
		</div>

	</div>
</template>
<script>

	import LscPage from '../../components/page_list.vue'
	import {mapGetters} from 'vuex'

	export default{
		name: 'home',
		computed: {
			...mapGetters({
				navStatus: 'getNavStatus',
				billList: 'getBillList',
				billStatistics: 'getBillStatistics'
			}),
			pages () {
				if(this.billList.pageInfo){
					return this.billList.pageInfo.totalPage
				}
			},
			showAmount () {

				let self = this
				$(function () {
					var gaugeOptions = {
						chart: {
							type: 'solidgauge'
						},
						title: null,
						pane: {
							center: ['50%', '85%'],
							size: '140%',
							startAngle: -90,
							endAngle: 90,
							background: {
								backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
								innerRadius: '60%',
								outerRadius: '100%',
								shape: 'arc'
							}
						},
						tooltip: {
							enabled: false
						},
						// the value axis
						yAxis: {
							stops: [
								[0.1, '#55BF3B'], // green
								[0.5, '#DDDF0D'], // yellow
								[0.9, '#DF5353'] // red
							],
							lineWidth: 0,
							minorTickInterval: null,
							tickPixelInterval: 400,
							tickWidth: 0,
							title: {
								y: -70
							},
							labels: {
								y: 16
							}
						},
						plotOptions: {
							solidgauge: {
								dataLabels: {
									y: 5,
									borderWidth: 0,
									useHTML: true
								}
							}
						}
					};
					// 当月订单金额
					$('#container-month').highcharts(Highcharts.merge(gaugeOptions, {
						yAxis: {
							min: 0,
							max: 100000,
							title: {
								text: null
							}
						},
						credits: {
							enabled: false
						},
						series: [{
							name: 'Speed',
							data: [self.monthAmount],
							dataLabels: {
								format: '<div style="text-align:center"><span style="font-size:25px;color:' +
								((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y:.2f}</span><br/>' +
								'</div>'
							}
						}]
					}));
					// 其他销售金额
					$('#container-other').highcharts(Highcharts.merge(gaugeOptions, {
						yAxis: {
							min: 0,
							max: 100000,
							title: {
								text: null
							}
						},
						credits: {
							enabled: false
						},
						series: [{
							name: 'Speed',
							data: [self.otherAmount],
							dataLabels: {
								format: '<div style="text-align:center"><span style="font-size:25px;color:' +
								((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y:.2f}</span><br/>' +
								'</div>'
							}
						}]
					}));
					// 累计销售金额
					$('#container-cumulative').highcharts(Highcharts.merge(gaugeOptions, {
						yAxis: {
							min: 0,
							max: 100000,
							title: {
								text: null
							}
						},
						credits: {
							enabled: false
						},
						series: [{
							name: 'Speed',
							data: [self.cumulativeAmount],
							dataLabels: {
								format: '<div style="text-align:center"><span style="font-size:25px;color:' +
								((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y:.2f}</span><br/>' +
								'</div>'
							}
						}]
					}));
					// Bring life to the dials

				});
			}
		},
		data () {
			return {
				eventPage: 1,
				eventFunt: 'fetchBill',
				eventParams: {},
				years: '',
				months: '',
				cumulativeAmount: '', // 累计销售金额
				monthAmount: '', // 当月订单金额
				otherAmount: '', // 其他销售金额

			}
		},
		methods: {

			goPage (data) {
				this.eventPage = data.page
			},

			billSearch () {

				let params = {
					page: '1',
					year: this.years,
					months: this.months
				}
				this.eventParams.year = this.years
				this.eventParams.months = this.months
				this.$store.dispatch('fetchBill', params)
			}
		},
		mounted () {

			// 账单列表
			let params = {
				page: '1',
				year: this.years,
				months: this.months
			}
			this.$store.dispatch('fetchBill', params)

			// 账单金额
			this.$store.dispatch('fetchBillStatistics')


		},
		components: {
			LscPage
		},
		watch: {
			billList (newVal) {
				this.eventPage = newVal.pageInfo.pageIndex
			},
			billStatistics (newVal) {

				if(newVal.result) {
					this.cumulativeAmount = newVal.result.cumulativeSalesAmount
					this.monthAmount = newVal.result.monthOrderAmount
					this.otherAmount = newVal.result.otherSalesAmount
				}

				this.showAmount
			}
		}
	}
</script>

<style>

</style>
